<template>
    <div>

    </div>
</template>
<script>
import * as THREE from "three";
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
//数学中的法线概念：在平面上的一条垂直于平面的向量（就是法线），几何体中的每个面都有自己的法线。
//target:介绍BufferAttribute中的顶点法线数据(法向量)，threejs的法线和数学中的法线概念一样，但是threejs他有自己的数据格式
// 一 创建一个空的几何体对象
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
     0, 0, 0, //顶点1坐标
    80, 0, 0, //顶点2坐标
    80, 80, 0, //顶点3坐标
    0, 80, 0, //顶点4坐标
]);
// 不能只说法线向量沿着z轴方向，而是通过某种数据形式来说明法线向量
const norlmals = new Float32Array([
    0, 0, 1,//0
    0, 0, 1,//0
    0, 0, 1,//0
    0, 0, 1,//0
]);
const index = new Uint16Array([
 0, 1, 2, 0, 2, 3,
]);
//2.定义定点数据 创建一个属性缓冲区对象，来表示几何体的顶点位置数据 参数1：顶点位置数据 2：每个顶点数据项的分量数量
// 3.设置几何体的顶点位置属性或者geometry.setAttribute('position', attribute);
 geometry.attributes.position = new THREE.BufferAttribute(vertices, 3);
//  geometry.attributes.normal = new THREE.BufferAttribute(norlmals, 3);
 
 geometry.index= new THREE.BufferAttribute(index, 1);
 console.log(' geometry.attributes.normal', geometry.attributes);
//  geometry.setIndex(indexAttribute);//  geometry.index = indexAttribute;



let scene=new THREE.Scene();
// let material = new THREE.MeshBasicMaterial({
//     color: 0xff0000,
//     side: THREE.DoubleSide
// }); 

let material = new THREE.MeshLambertMaterial({
    color: 0xff0000,
    side: THREE.DoubleSide
}); 

let mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
scene.add(mesh);

//光源设置
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(100, 60, 50);
scene.add(directionalLight);
const ambient = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambient);


let camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(200, 300, 200);
camera.lookAt(scene.position);

let axesHelper = new THREE.AxesHelper(100);
axesHelper.setColors(0xff0000, 0x00ff00, 0x0000ff);
scene.add(axesHelper);

let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls( camera, renderer.domElement );
renderer.render(scene, camera);
controls.addEventListener('change', function () {
    renderer.render(scene, camera);
});
    export default {
        
    }
</script>

<style scoped>

</style>